<script setup>
import {onLoad} from "@dcloudio/uni-app";
import TnTitle from '@tuniao/tnui-vue3-uniapp/components/title/src/title.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import {ref} from "vue";
import {config} from "@/config";

const data = ref({});

onLoad((options) => {
  const a = JSON.parse(options.data)
  data.value = a;
  console.log('App onLoad', a);
});

//分享
const onShareAppMessage = (res) => {
  if (res.from === 'button') {
  }
  return {
    title: '请家教，来找我',
    path: '/pages/index/index'
  }
}

//星期
// const serverValue = ref('2,3,5');
const weekdaysMapping = {
  '1': '星期一',
  '2': '星期二',
  '3': '星期三',
  '4': '星期四',
  '5': '星期五',
  '6': '星期六',
  '7': '星期日'
};


// 使用映射将数字转换为对应的星期信息

const backWeek = (days) => {
  const weekdaysArray = days.split(','); // 将字符串分割成数组
  const weekdays = weekdaysArray.map(day => weekdaysMapping[day]).join(', ');

  return weekdays;
}

const orderBack = () => {
  uni.switchTab({
    url: '/pages/course/course'
  })
}
</script>

<template>
  <view class="app">
    <view class="success">
      <TnIcon name="success-circle" :size="200" color="#089a68"/>
      <text>提交成功</text>
    </view>
    <view class="order-box">
      <view style="padding: 20rpx;display: flex;flex-direction: column;justify-content: space-around;height: 100%;">
        <TnTitle size="xl" title="提交信息"/>
        <view style="font-size: 32rpx;">学生名：{{ data.userName }}</view>
        <view style="font-size: 32rpx;">手机号：{{ data.phone }}</view>
        <view style="font-size: 32rpx;">科目：{{ data.courseName }}</view>
        <view style="font-size: 32rpx;">授课：{{ data.res === 0 ? '一周1次' : backWeek(data.day) }}、每次{{
            data.appTime
          }}小时
        </view>
        <view style="font-size: 32rpx;display: flex;justify-content: space-between;">
          <view style="display: flex;align-items: center;">
            <image style="width: 28rpx;height: 28rpx;margin: 10rpx;" src="/static/time.svg"/>
            <text style="font-size: 24rpx;">{{ data.time }}</text>
          </view>
          <view style="display: flex;align-items: center;">
            <image style="width: 28rpx;height: 28rpx;margin: 10rpx;" src="/static/min-addres.svg"/>
            <text style="font-size: 24rpx;width: 350rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
              {{ data.address }}
            </text>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%;padding: 30rpx;">
      <TnTitle size="lg" title="报名人员"/>
    </view>
    <view class="user_box">
      <image :src="config.baseUrl + '/file/' + data.user.avatar"/>
      <text>{{ data.user.nickName }}</text>
    </view>
    <view style="margin: 30rpx;display: flex;align-items: center;justify-content: space-evenly;width: 100%;">
      <button class="share_btn" open-type="share" @click="onShareAppMessage">
        <TnIcon name="share-triangle" :size="45"/>
        <text style="margin: 10rpx;">分享给朋友</text>
      </button>
      <button class="qukan" @click="orderBack">去看看</button>
    </view>
  </view>
</template>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .success {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 30rpx;
  }

  .order-box {
    margin: 30rpx;
    width: 686rpx;
    height: 540rpx;
    background: #ffffff;
    border-radius: 24rpx;
  }

  .user_box {
    width: 686rpx;
    height: 160rpx;
    background: #FFF;
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    image {
      margin: 30rpx;
      width: 96rpx;
      height: 96rpx;
      border-radius: 9999rpx;
    }

    text {
      font-size: 32rpx;
    }
  }

  .share_btn {
    height: 96rpx;
    width: 334rpx;
    background: #f0f1fe;
    border: 2rpx solid #0045cf;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0045cf;
  }

  .qukan {
    height: 96rpx;
    width: 334rpx;
    background: #0045cf;
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
